import { Button, Card, Checkbox, Form, Input, Table, Modal, message } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import { EditOutlined, DeleteOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import React, { useEffect, useState } from 'react'
import { delHospital, delHospitalAll, getHospital } from '@/api/hospital/HospitalSet';
import { HospitalItem, HospitalList } from '@/api/hospital/model/HospitalSetType';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';
const { confirm } = Modal;

export default function HospitalSet() {
  let navigate = useNavigate()
  let [total, setTotal] = useState(50)
  let [current, setCurrent] = useState(1)
  let [pageSize, setpageSize] = useState(5)
  let [hospital, setHospital] = useState<HospitalList>([])
  let [type,setType] = useState<boolean>(true)
  // 存储多选框
  let [checkedvalue,setcheckedvalue] = useState<React.Key[]>([])
  let [form] = useForm()
  // 初始化数据
  let getHospitalvalue = async (page = current, limit = pageSize) => {
    let { hosname, hoscode } = form.getFieldsValue()
    let res = await getHospital({ page, limit, hoscode, hosname })
    setHospital(res.records)
    setTotal(res.total)
  }
  // 获取Input框数据
  let finish = () => {
    setCurrent(1)
    getHospitalvalue()

  }
  // 根据ID删除数据
  let del = (id: string,name:string) => {
    return () => {
      confirm({
        title: `确定要删除${name} 吗?`,
        icon: <ExclamationCircleFilled />,
        async onOk() {
          await delHospital(id)
          message.success("删除成功")
          getHospitalvalue()
        },
      })
    }
  }
  // 批量删除数据
  let delAll = async ()=>{
    setType(false)
    confirm({
      title: `确定要删除吗?`,
      icon: <ExclamationCircleFilled />,
      async onOk() {
        await delHospitalAll(checkedvalue)
        message.success("删除成功")
        setType(false)
        getHospitalvalue()
      },
    })
   


  }
  // 清空数据
  let clear = () => {
    getHospitalvalue()
  }
  // 模拟生命周期获取数据
  useEffect(() => {
    getHospitalvalue()
  }, [current, pageSize])

  const columns: ColumnsType<any> = [
    {
      align: "center",
      title: '序号',
      render(key: any, value: any, index: number) {
        return index + 1

      }
    },
    {
      align: 'center',
      title: '医院名称',
      dataIndex: 'hosname',

    },
    {
      align: 'center',
      title: '医院编号	',
      dataIndex: 'hoscode',

    },
    {
      align: 'center',
      title: 'api基础路径	',
      dataIndex: 'apiUrl',

    }, {
      align: 'center',
      title: '签名',
      dataIndex: 'signKey',

    }, {
      align: 'center',
      title: '联系人姓名',
      dataIndex: 'contactsName',

    }, {
      align: 'center',
      title: '联系手机号',
      dataIndex: 'contactsPhone',

    },
    {

      align: "center",
      fixed: "right",
      title: '操作',
      render(row: HospitalItem) {
        return <>
          <Button type="primary" icon={<EditOutlined />} onClick={() => {
            navigate(`/syt/hospital/hospitalList/add/${row.id}`)
          }} ></Button>
          <Button type="primary" onClick={del(row.id,row.hosname)} className='ml' icon={<DeleteOutlined />} danger></Button>
        </>
      }
    },
  ];
  return (
    <Card>
      {/* form表单 */}
      <Form
        onFinish={finish}
        onReset={clear}
        form={form}
        layout="inline"
      >
        <Form.Item
          name="hosname">

          <Input />
        </Form.Item>

        <Form.Item
          name="hoscode">
          <Input />
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button className='ml' type="primary" htmlType="reset" danger>
            清空
          </Button>
        </Form.Item>
      </Form>
      <div className='mt'>
        <Button type="primary" onClick={() => {
          navigate("/syt/hospital/hospitalList/add")
        }}>
          添加
        </Button>
        <Button className='ml' onClick={delAll} type="primary" disabled={checkedvalue.length===0} danger>
          批量删除
        </Button>
      </div>

      <Table
        scroll={{ x: 1600 }}
        bordered
        rowKey="id"
        rowSelection={{
          onChange(selectedRowKeys: React.Key[]){
            setcheckedvalue(selectedRowKeys)
            
            
            
          }
        }}
        pagination={{
          current: current,
          total: total,
          pageSize: pageSize,
          pageSizeOptions: [5, 10, 15, 20],
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal(total: number) {
            return <span>{total}</span>
          },
          onChange(page: number, pageSize: number) {
            setCurrent(page)
            setpageSize(pageSize)

          }
        }

        }

        className='mt' dataSource={hospital} columns={columns}
      />;
    </Card>
  )
}
